<template>
  <!-- 预览内容 -->
  <div
    class="preview"
    v-if="ARTICLE_OPS_TYPE[curArticleOpsType] === ARTICLE_OPS_TYPE.preview"
  >
    <h4>{{ articleForm.stem }}</h4>
    <p v-html="articleForm.content"></p>
  </div>
  <!-- 完整表单 -->
  <el-form
    v-else
    label-width="40px"
  >
    <el-form-item label="标题">
      <el-input
        placeholder="请输入文章标题"
        v-model.lazy.trim="articleForm.stem"
      ></el-input>
    </el-form-item>
    <el-form-item label="编辑">
      <!-- 富文本编辑器 -->
      <quill-editor
        theme="snow"
        placeholder="请输入文本内容"
        toolbar="full"
        v-model:content="articleForm.content"
        contentType="html"
      ></quill-editor>
    </el-form-item>
    <el-form-item prop="">
      <el-button
        type="primary"
        @click="submitArticleForm"
      >确 认</el-button>
      <el-button @click="">取 消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
  import { getArticleDetailByIdApi, addArticleApi, setArticleApi } from '@/api/article';
  import { ARTICLE_OPS_TYPE } from '@/constant/article'
  import { ElMessage } from 'element-plus';
  import { reactive, defineProps, defineEmits } from 'vue';

  // 文章内容
  const articleForm = reactive({
    id: '', // 文章id
    stem: '', // 文章标题
    content: '' // 文章内容
  })

  const props = defineProps({
    // 文章类型
    curArticleOpsType: {
      type: String,
      default: ''
    },
    // 文章ID
    articleId: {
      type: String,
      default: ''
    }
  })
  const emits = defineEmits()

  // 通过 id 来获取文章详细信息
  async function getArticleById(articleId) {
    // 查看是否有 id
    if (!articleId) return
    // 有就查询
    const detail = await getArticleDetailByIdApi(articleId)

    // 遍历到 articleForm 中 可以使用 Object.keys().forEach()
    // 也可以使用 for in
    /* Object.keys(articleForm).forEach((key) => {
      articleForm[key] = detail[key]
    }) */
    for (let key in articleForm) {
      articleForm[key] = detail[key]
    }
  }
  getArticleById(props.articleId)

  // 不要校验的 key
  const whileCheckoutKey = {
    id: 'id'
  }

  // 表单校验
  function formCheckout() {
    for (let key in articleForm) {
      // 内容为空并且不在白名单里面
      if (!articleForm[key].trim() && !whileCheckoutKey[key]) {
        ElMessage.warning('内容不能为空')
        return false
      }
    }
    return true
  }

  // 表单清除
  function clearForm() {
    for (let key in articleForm) {
      articleForm[key] = ''
    }
    // 内容文本（富文本编辑器需要特殊处理）
    articleForm.content = '<p><br></p>'
  }

  // 提交表单
  async function submitArticleForm() {
    // 校验
    if (!formCheckout()) return

    // 根据 id 来判断是编辑还是新增
    if (articleForm.id) {
      // 编辑
      await setArticleApi(articleForm)
    } else {
      // 新增
      const { id, ...form } = articleForm
      await addArticleApi(form)
      // 清除表单
      clearForm()
    }

    // 提示成功
    ElMessage.success(articleForm.id ? '编辑成功' : '添加成功')
    // 关闭抽屉并更新数据
    emits('finish')
  }
</script>

<style scoped lang="scss">
  .el-form {
    .el-input {
      height: 40px;
    }

    :deep(.ql-container) {
      width: 100%;
      min-height: 200px;
    }

    .el-form-item:last-child {
      margin-top: 100px;
    }
  }
</style>